<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="wanze">
  <meta name="copyright" content="wanze">
  <meta name="keywords" content="周易, tools, ">

  <title>周易摇卦小程序</title>

  <link href="font-awesome.css" rel="stylesheet" media="screen">
  <link href="bootstrap.min.css" rel="stylesheet" media="screen">
  <link rel="stylesheet" type="text/css" href="elegant.css" media="screen">

</head>

<body>

  <div class="container-fluid">
    <div class="col-md-10">
      <article>
        <div class="row">
          <div class="col-md-8 col-md-offset-2 article-content">

            <style>
              .tab-div {
                position: relative;
                padding: 15px 15px 15px;
                margin: 10px -15px 15px;
                border-color: #e5e5e5 #eee #eee;
                border-style: solid;
              }

              #tab li {
                margin-left: 0px;
                margin-bottom: -1px;
              }
            </style>

            <br>
            <h2>摇卦</h2>
            <p>在摇卦先静心，并问自己所求所疑问之事。</p>
            <div>
              <button class="btn btn-default" onclick="yaogua();" type="button">测一卦
              </button>
              <button onclick="check_history();" type="button" class="btn btn-default pull-right" data-toggle="modal" data-target="#myModal">
                历史记录
              </button>
            </div>

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">
                      历史记录</h4>
                  </div>
                  <div class="modal-body">
                    <div id="history"></div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="tab-div">
              <!-- Nav tabs -->
              <ul id="tab" class="nav nav-tabs" style="padding-left:0px;" role="tablist">
                <li role="presentation" class="active"><a href="#yuanwen" aria-controls="yuanwen" role="tab" data-toggle="tab" aria-expanded="true">本卦</a></li>
                <li role="presentation" class=""><a href="#biangua-yuanwen" aria-controls="biangua-yuanwen" role="tab" data-toggle="tab" aria-expanded="false">变卦</a></li>
              </ul>

              <!-- Tab panes -->
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade active in" id="yuanwen">
                </div>
                <div role="tabpanel" class="tab-pane fade" id="biangua-yuanwen">
                </div>
              </div>

            </div>

          </div>

        </div>
      </article>
    </div>


  </div>


  <footer>
    <div id="footer">
    </div>
  </footer>

  <script src="jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>
  <script src="moment.min.js"></script>
  <script src="yaogua.js"></script>


</body>

</html>
